<template>
    <div>
    <el-dialog
        title="修改归还时间"
        v-model="dialogFormVisible"
        :before-close="clear"
        width=30%
        >  
        <el-form v-model="form" style="text-align: left" ref="form">
          <el-form-item label="ID" :label-width="formLabelWidth" prop="id">
            <el-input name="id" type="text" v-model="form.id" readonly disabled></el-input>
          </el-form-item>  
           <el-form-item label="图书名" :label-width="formLabelWidth" prop="bookName">
            <el-input type="text" name="bookName" v-model="form.bookName" readonly disabled autocomplete="off"></el-input>
          </el-form-item>

           <el-form-item label="用户名" :label-width="formLabelWidth" prop="username">
            <el-input type="text" name="username" v-model="form.username" readonly disabled autocomplete="off"></el-input>
          </el-form-item>

          <el-form-item label="电话" :label-width="formLabelWidth" prop="phone">
            <el-input type="text" name="phone" v-model="form.phone" readonly disabled autocomplete="off"></el-input>
          </el-form-item>

          <el-form-item label="借阅时间" :label-width="formLabelWidth" prop="start">
            <el-input type="text" name="start" v-model="form.start" readonly disabled autocomplete="off"></el-input>
          </el-form-item>

          <el-form-item label="归还时间" :label-width="formLabelWidth" prop="end">
            <el-input type="text" name="end" v-model="form.end"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">        
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="onSubmit">确 定</el-button>
        </div>     
      </el-dialog>
    </div>
  </template>
  <script>
  export default {
      name: 'editBorrow',
      components:{},
      data () {
        return {
          dialogFormVisible: false,        
          form: {
             id:'',                 
             bookName:'',
             username:'', 
             phone:'',                
             start:'',
             end:'',  
          },
          formLabelWidth: '80px',
        }
      },
      methods: {
        clear () {       
          this.form = {
            id:'',                 
            bookName:'',
            username:'', 
            phone:'',                
            start:'',
            end:'',                       
          }
        },   
        onSubmit () {   
            // 确保 this.form.end 和 this.form.start 是有效的日期字符串或日期对象
            let startDate = new Date(this.form.start);
            let endDate = new Date(this.form.end);

            // 检查日期是否有效
            if (isNaN(startDate) || isNaN(endDate)) {
                this.$message({
                    type: 'error',
                    message: '起始日期或结束日期无效'
                });
                return;
            }

            // 计算时间差（以天为单位）
            let timeDifference = (endDate - startDate) / (1000 * 60 * 60 * 24); 
            
            var _this = this
            let data = {
                day: timeDifference,
                id: this.form.id,           
            };

            this.$api.post('borrow/updateBorrowEnd', {"day": data.day, "id": data.id})
                .then((res) => {                        
                    if (res.code === 200) {
                        this.$emit("onReload");
                        this.dialogFormVisible = false
                    } else {
                        this.$message({
                            type: 'info',
                            message: '修改借阅记录信息失败'
                        });   
                    }        
                })
        }
      },
   } 
  </script>
  
  <style scoped>
    .el-icon-circle-plus-outline {
      margin: 50px 0 0 20px;
      font-size: 100px;
      float: left;
      cursor: pointer;
    } 
  
  </style>